import { Component, OnInit, OnChanges, Input } from '@angular/core';
import { EChartOption } from 'echarts';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'itmp-equipment-pie',
    templateUrl: './equipment-pie.component.html',
    styleUrls: ['./equipment-pie.component.css']
})
export class EquipmentPieComponent implements OnInit, OnChanges {
    options: EChartOption;
    @Input() data: any;
    @Input() titletext: String;

    constructor(private translate: TranslateService) {}

    ngOnInit() {}
    ngOnChanges() {
        this._setOptions();
    }
    _setOptions() {
        let translateData = 'Total';
        this.translate.get('Data_Visualization.EquipmentAnalytics.' + translateData).subscribe((res: string) => {
            translateData = res;
        });
        if (!this.data) {
            return;
        }
        let total = 0;
        this.data.map(item => {
            total += +item.value;
        });
        this.options = {
            backgroundColor: '#363a70', //背景色
            title: {
                text: `${translateData}: ${total}`,
                right: 40,
                top: 30,
                textStyle: {
                    color: '#ffffff',
                    fontSize: 12
                }
            },
            tooltip: {
                formatter: '{b}: {c} / {d}%'
            },
            legend: {
                orient: 'vertical',
                right: 10,
                top: 70,
                itemGap: 20,
                textStyle: {
                    color: '#ffffff' //图例颜色
                },
                formatter: name => {
                    let value;
                    this.data.map(item => {
                        if (item.name === name) {
                            value = item.value;
                        }
                    });
                    return name + ' : ' + value;
                }
            },
            color: ['#238CE6', '#F5736E'],
            series: [
                {
                    type: 'pie',
                    radius: ['25%', '60%'],
                    center: ['50%', '60%'],
                    data: this.data,

                    label: {
                        formatter: '{d}%'
                    },
                    labelLine: {
                        length: 5,
                        length2: 5
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                {
                    type: 'pie',
                    radius: ['25%', '35%'],
                    center: ['50%', '60%'],
                    hoverAnimation: false,
                    data: [1],
                    itemStyle: {
                        color: 'rgba(63, 63, 63, 0.2)'
                    },
                    labelLine: {
                        show: false
                    },
                    tooltip: {
                        show: false
                    }
                }
            ]
        } as EChartOption;
    }
}
